<template>
  <div
    class="login w-screen h-screen flex justify-center items-center fixed top-0 left-0 right-0 bottom-0"
    v-if="model"
  >
    <div
      @click="close"
      class="fixd top-0 right-0 left-0 bottom-0 w-screen h-screen"
    ></div>
    <div
      v-if="logintype === 'phone'"
      class="login-model w-1/5 h-3/5 bg-white shadow-2xl rounded-lg absolute"
    >
      <img class="rounded-tl-lg" src="../assets/inedx/qr_code.png" alt="" />
      <img class="block mx-auto" src="../assets/inedx/logobg.png" alt="" />
      <i class="el-icon-close close" @click="close"></i>
      <form class="phone_password text-xs">
        <dl>
          <dd>
            <div class="phone_f">
              <i class="el-icon-mobile-phone"></i>
              <p class="text-xs">+86</p>
              <i class="el-icon-caret-bottom"></i>
            </div>
            <input type="text" placeholder="请输入手机号" v-model="phone" />
          </dd>
          <dd>
            <div class="password_f">
              <i class="el-icon-lock"></i>
              <input
                type="password"
                class="password"
                placeholder="请输入密码"
                v-model="password"
              />
            </div>
            <p class="resetpassword">重设密码</p>
          </dd>
        </dl>
        <div class="autologin">
          <input type="checkbox" id="autologin" />
          <label for="autologin">自动登录</label>
        </div>
        <input
          type="button"
          @click="log_in('cellphone', { phone: phone, password: password })"
          value="登录"
          class="login_btn"
        />
        <div class="register">
          <router-link to="">注册</router-link>
        </div>
        <div class="third_party">
          <dl>
            <dt class="wecat"></dt>
            <dt class="qq"></dt>
            <dt class="weibo"></dt>
            <dt @click="SwitchTheLogin" class="netease"></dt>
          </dl>
        </div>
        <div class="modal_footer">
          <input v-model="agreement" type="checkbox" id="agreement" />
          <label>
            同意
            <router-link to="">《服务条款》</router-link>
            <router-link to="">《隐私政策》</router-link>
            <router-link to="">《儿童隐私政策》</router-link>
          </label>
        </div>
      </form>
    </div>
    <div
      v-else-if="logintype === 'email'"
      class="login-model w-1/5 h-3/5 bg-white shadow-2xl rounded-lg absolute"
    >
      <div class="flex justify-between text-xs mt-2 px-3 items-center">
        <p class="cursor-pointer" @click="goBack">
          <i class="el-icon-arrow-left"></i> 返回其他登录
        </p>
        <i class="el-icon-close cursor-pointer text-lg"></i>
      </div>
      <img
        src="../assets/inedx/login_emailb.png"
        class="block mx-auto my-10"
        alt=""
      />
      <form class="phone_password text-xs">
        <dl>
          <dd>
            <div class="password_f">
              <i class="el-icon-message"></i>
              <input
                type="email"
                class="password w-full"
                placeholder="请输入邮箱"
                v-model="email"
              />
            </div>
          </dd>
          <dd>
            <div class="password_f">
              <i class="el-icon-lock"></i>
              <input
                type="password"
                class="password"
                placeholder="请输入密码"
                v-model="password"
              />
            </div>
            <p class="resetpassword">重设密码</p>
          </dd>
        </dl>
        <div class="autologin">
          <input type="checkbox" id="autologin" />
          <label for="autologin">自动登录</label>
        </div>
        <input
          type="button"
          @click="
            log_in('', {
              email: email,
              password: password,
            })
          "
          value="登录"
          class="login_btn"
        />
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: true,
      password: "",
      phone: "",
      agreement: false,
      logintype: "phone",
      email: "",
    };
  },
  methods: {
    close() {
      this.model = !this.model;
      this.$emit("close", this.model);
    },
    log_in(type = "", params) {
      if (this.agreement) {
        this.axios({
          method: "get",
          url: `https://music.hzbiz.net/login/${type}`,
          params,
        })
          .then((result) => {
            if (result.data.code === 200) {
              this.$store.commit("changeuserdata", result.data);
              localStorage.setItem("TOKEN", result.data.token);
              this.$message({
                message: "登陆成功",
                type: "success",
              });
              this.close();
            } else if (result.data.code === 400) {
              this.$message({
                message: "请输入正确的账号或密码",
                type: "warning",
              });
            } else if (result.data.code === 502) {
              this.$message({
                message: result.data.msg,
                type: "warning",
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message({
          message: "请先勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》",
          type: "warning",
        });
      }
    },
    SwitchTheLogin() {
      if (this.agreement) {
        this.logintype = "email";
      } else {
        this.$message({
          message: "请先勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》",
          type: "warning",
        });
      }
    },
    goBack() {
      this.logintype = "phone";
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  z-index: 999;
  .login-model {
    z-index: 9999;
  }
  .password {
    width: 100%;
  }
  .close {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
  }
  .phone_password {
    width: 100%;
    height: 180px;
    // background: #ccc;
    dl {
      display: flex;
      flex-direction: column;
      width: 260px;
      height: 80px;
      margin: 0 auto;
      border: 1px solid #d8d8d8;
      border-radius: 5px;
      overflow: hidden;
      dd {
        position: relative;
        width: 100%;
        height: 50%;
        display: flex;
        border-bottom: 1px solid #d8d8d8;
        .phone_f {
          display: flex;
          align-items: center;
          width: 30%;
          justify-content: space-around;
          border-right: 1px solid #d8d8d8;
          padding: 5px;
          font-size: 16px;
        }
        input {
          outline: none;
          padding-left: 10px;
        }
        .resetpassword {
          position: absolute;
          right: 5px;
          top: 10px;
          cursor: pointer;
          color: #9ca3af;
        }
        .password_f {
          display: flex;
          align-items: center;
          padding: 5px;
          i {
            font-size: 16px;
            margin-right: 5px;
          }
        }
      }
    }
    .autologin {
      width: 260px;
      margin: 0 auto;
      margin-top: 10px;
      display: flex;
      align-items: center;
      label,
      input {
        cursor: pointer;
      }
      input {
        margin-right: 5px;
      }
    }
    .login_btn {
      display: block;
      margin: 0 auto;
      width: 260px;
      height: 40px;
      background: #ea4848;
      border-radius: 5px;
      border: none;
      outline: none;
      margin-top: 20px;
      color: white;
      font-size: 18px;
      cursor: pointer;

      &:hover {
        background: #c72e2e;
      }
    }
    .register {
      text-align: center;
      margin-top: 10px;
      a {
        text-decoration: underline;
      }
    }
    .third_party {
      dl {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border: none;
      }
      dt {
        width: 38px;
        height: 38px;
        margin-right: 20px;
        border-radius: 50%;
        cursor: pointer;
      }
      .wecat {
        background: url(../assets/inedx/loginlogoqq.png) no-repeat -150px -670px;
        border: none;
      }
      .qq {
        background: url(../assets/inedx/loginlogoqq.png) no-repeat -190px -670px;
      }
      .weibo {
        background: url(../assets/inedx/loginlogoqq.png) no-repeat -230px -670px;
      }
      .netease {
        background: url(../assets/inedx/loginlogoqq.png) no-repeat -271px -670px;
      }
    }
    .modal_footer {
      width: 100%;
      padding: 0 40px;
      font-size: 12px;
      display: flex;
      justify-content: start;
      align-items: center;
      margin-top: 20px;

      input {
        margin-right: 10px;
      }

      a {
        color: #507daf;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>